import React, {Component} from "react";
import { Space, Table, Input, Select ,Row, Divider,Card} from "antd";
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import getData from '../../../compontens/GetData/getData.jsx'; 
import colorLists from '../../../compontens/color.js';

// const colorLists = [
//     "rgb(158,125,110)",
//     "rgb(182,244,241)",
//     "rgb(103,117,231)",
//     "rgb(225,123,14)",
//     "rgb(154,182,92)",
//     "rgb(164,129,38)",
//     "rgb(108,110,81)",
//     "rgb(200,156,151)",
//     "rgb(126,138,93)",
//     "rgb(211,100,68)",
//     "rgb(194,169,14)",
//     "rgb(212,108,127)",
//     "rgb(242,164,123)",
//     "rgb(106,240,102)",
//     "rgb(186,247,151)",
//     "rgb(118,165,251)",
//     "rgb(162,104,181)",
//     "rgb(222,239,216)",
//     "rgb(191,140,51)",
//     "rgb(174,108,108)",
//     "rgb(164,236,168)"
// ]

const Type = [
  {
    value: 'pre',
    label: 'Precentage',
  },
  {
    value: 'reads',
    label: 'Reads Number',
  },
];

const ClassInfo = [
  {
    value: 'K',
    label: 'Kingdom',
  },
  {
    value: 'P',
    label: 'Phylum',
  },
  {
    value: 'C',
    label: 'Class',
  },
  {
    value: 'O',
    label: 'Order',
  },
  {
    value: 'F',
    label: 'Family',
  },
  {
    value: 'G',
    label: 'Genus',
  },
  {
    value: 'S',
    label: 'Species',
  },
];
export default class Plots extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          columns:[],
          dataSource:[],
          typetext:'pre',
          classtext:'K',
      };
    }
    handletypeChange = (value) => {
      this.setState({
        typetext: value,
      })
      const file_Name = this.state.kra_result.classification_path + '/' + this.state.classtext + '_' +value + '.tsv';
      this.get_data(file_Name);
    };
    handleClassChange = (value) => {
      this.setState({
        classtext: value,
      })
      const file_Name = this.state.kra_result.classification_path + '/' + value + '_' +this.state.typetext + '.tsv';
      this.get_data(file_Name);
    };


    get_data = (file_Name) => {
        getData(file_Name)
        .then(result => {
          this.getPlotsData(result)
        })
        .catch(error => {
          console.log(error);
          alert('Error');
        });
    };

    getPlotsData = (data) => {
      const rows = data.split('\n');
      if(rows[rows.length-1] === ''){
        rows.pop();
      }
      const columnData = [];
      const xAxisData = [];
      const legendData = [];
      for (let i = 0; i < rows.length; i++) {
        if(i > 20)
            break;
        const rowData = rows[i].split('\t');
        if(i === 0){
            xAxisData.push(...rowData);
            continue;
        }
        columnData.push({
                  name: rowData[0],
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                      focus: 'series'
                    },
                  data: rowData.splice(1)
                });
        legendData.push(rowData[0]);
      }
      const xAxis= [
      {
          type: 'category',
          data: xAxisData.splice(1)
      }
      ]; 
    //   const color = this.getColor(rows.length - 1)
      this.BarItem(xAxis, columnData, legendData);
    }

    BarItem = (xAxis, columnData,legendData ) => {
        console.log(colorLists)
      this.myChart && this.myChart.dispose();
      var chartDom = document.getElementById('Plots');
      this.myChart = echarts.init(chartDom);
      echarts.registerTransform(ecStat.transform.clustering);
      var option = {
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
        },
        color: colorLists,
        backgroundColor: 'white', 
        legend: {
            type: 'scroll',
            data: legendData,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: xAxis,
        yAxis: [
        {
            type: 'value'
        }
        ],
        series: columnData
    };
      this.myChart.setOption(option);
    }

    componentDidMount() {
      // const kra_result = localStorage.getItem('kra_result');
      const kra_result =  {
        "IDList": ["M0018C_2_month", "M0018C_1_month", "M0018C_3_month", "M0018C_14_day", "M0018C_birth", "M0018M_3_month", "M0018M_gest", "M0018M_birth"],
        "kra_path": "data/Result/1/Kraken_result",
        "result_path": "data/Result/1",
        "sankey_path": "data/Result/1/sankey",
        "krona_path": "data/Result/1/Krona_result",
        "classification_path": "data/Result/1/classification",
        "diversity_path": "data/Result/1/diversity"
      }
      if(!kra_result){
        return;
      }
      this.setState({
        kra_result: kra_result,
      })
      const file_Name = kra_result.classification_path + '/K_pre.tsv';
      this.get_data(file_Name);
    }

  render(){
        return(
          <>
           <Space direction="horizontal" 
              style={{
                width:'100%',
              }} >
              <Select
                style={{
                  width: "100%",
                  textAlign: "center",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
              }}
                defaultValue={ClassInfo[0]} 
                onChange={this.handleClassChange}
                options={ClassInfo}
              />
              <Select
                style={{
                  width: "100%",
                  textAlign: "center",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
              }}
                defaultValue={Type[0]} 
                onChange={this.handletypeChange}
                options={Type}
              />
          </Space>
          <Divider orientation="left">Relative abundance information of different taxonomic units in different samples Plots</Divider>   
          <div className='w100 h100' id='Plots'></div>
         
          </>

           
        )
    }
    
}